<template>
  <div id="app">
    <div class="top">
      <van-nav-bar
        :border="false"
        title="宠物洗护"
        left-arrow
        @click-left="$router.go(-1)" />
    </div>
    <div class="cont">
      <div v-for="(i, index) in item" :key="i.wid">
        <RouterLink :to="`/details/${i.wid}`">
          <wash
            :imgname="i.imgname"
            :label="i.label"
            :price="i.price"
            :title="i.title"></wash>
        </RouterLink>
        <div class="bg">
          <i
            class="starl iconfont icon-24gl-star"
            v-if="!(listTitle.indexOf(washTitle[index]) != -1)"
            @click="
              addCollect(i.wid, i.title, i.imgname, i.label, i.price)
            "></i>
          <i
            class="starf iconfont icon-24gf-star"
            v-else
            @click="removeCollect(i.title)"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import wash from '@/components/Petwashings.vue'
import { Toast } from 'vant'
import { mapState } from 'vuex'
import {
  getWash,
  addCollectWash,
  removeCollectWash,
  getCollectWash,
  isUserCollectWash,
} from '@/api/home'
export default {
  components: {
    wash,
  },
  data() {
    return {
      item: [],
      // 收藏图标
      icon: false,
      listTitle: [],
      washTitle: [],
    }
  },
  methods: {
    // 获取宠物信息

    async getWash() {
      const data = await getWash()
      this.item = data.data.message
      console.log(this.item)
      this.item.forEach(item => {
        this.listTitle.push(item.title)
      })
      console.log(this.listTitle)
    },
    async getCollect() {
      const data = await getCollectWash({ uid: this.$store.state.user.uid })
      console.log(data)
      data.data.message.forEach(item => {
        this.washTitle.push(item.title)
      })
      console.log(this.washTitle)
    },
    a() {
      let a = [
        '宠物细致全身洗',
        '细致全身洗',
        '快速保养全洗',
        '保养快速全洗',
        '宠物极致全身洗',
      ]
      let b = ['宠物细致全身洗', '细致全身洗', '宠物']
      for (var i = 0; i < b.length; i++) {
        console.log(a.indexOf(b[i]) != -1)
      }
    },

    // 添加收藏
    async addCollect(wid, title, imgname, label, price) {
      const data = await addCollectWash({
        uid: this.$store.state.user.uid,
        uname: this.$store.state.user.uname,
        wid,
        title,
        imgname,
        label,
        price,
      })
      if (data.data.status != 200) {
        Toast.fail('收藏失败!')
      } else {
        Toast.success('收藏成功!')
        window.location.reload(true)
      }
      console.log(data)
    },
    // 删除收藏
    removeCollect(title) {
      removeCollectWash({
        uid: this.$store.state.user.uid,
        title,
      }).then(res => {
        console.log(res)
        if (res.data.status != 200) {
          this.icon = true
          return Toast.fail({ message: 'err!' })
        }
        this.icon = false
        window.location.reload(true)
        return Toast.fail({ message: '已取消收藏!' })
      })
    },
  },
  beforeMount() {
    //发起请求，拿到宠物洗护数据
    this.getWash()
    this.getCollect()
    this.a()
  },
  computed: {
    //mapState将开放vuex中保存的user对象到当前组件的计算属性中
    //这样，在当前组件内部,就可以直接使用user来访问vuex中的user
    ...mapState(['user']),
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar {
  ::v-deep .van-icon {
    color: black;
  }
  ::v-deep .van-nav-bar__title {
    font-weight: bold;
    font-family: '黑体';
  }
}

::v-deep .van-nav-bar .van-icon {
  color: black;
}
.cont {
  position: relative;

  .bg {
    width: 35px;
    height: 35px;
    background-color: #fdebed;
    border-radius: 50%;
    margin-left: 280px;
    margin-top: -60px;
    text-align: center;
    font-size: 20px;
    line-height: 35px;
    position: absolute;
    // z-index: 999;

    .starf {
      color: red !important;
    }
  }
}

// .cont .btn {
//   display: inline-block;
//   font-size: 25px;
//   color: #cbc9c9;
//   margin-left: 5px;
//   margin-top: 5px;
// }

// .cont .btn2 {
//   display: inline-block;
//   font-size: 25px;
//   color: red;
//   margin-left: 5px;
//   margin-top: 5px;
// }

#app {
  height: 100%;
  overflow: scroll;
}
</style>
